import React from 'react';
import { HashRouter as Router, Route, Link, Switch, Redirect } from 'react-router-dom'
import Search from './Pages/Search'
import Discover from './components/Discover';
import Personal from './my_components/Personal';
import Login from './my_components/Login';
import List from './List/List'
import Playlist from './public/Playlist'
import Botplay from './public/Botplay'
import Play from './play'
import ReList from './ReList'
import Audio from './public/Audio'
import Comment from "./play/Comment"
// import Progressbar from './public/Progressbar'

import "../src/assets/css/relist/routers.css"

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      currentIndex: 1
    }
  }

  //选择页面组件
  select(e) {
    this.setState({
      currentIndex: e,
    })
  }

  render(props) {
    const links = [
      { path: "/personal", content: "我的" },
      { path: "/discover", content: "发现" },
      { path: "/list", content: "排行榜" },
      { path: "/search", content: "搜索" },
    ]
    return (
      <Router>
        <div>
          <Botplay {...this.props} />
          <Play {...this.props} />
          <Playlist {...this.props} />
          <div className="router">
            {links.map((item, index) => {
              return (<Link to={item.path} className="lis" onClick={this.select.bind(this, index)} key={index}>
                <span className={(index === this.state.currentIndex) ? "selected" : "unselect"}
                >{item.content}</span>
              </Link>)
            })}
          </div>
         
          <Switch>
            <Route path="/list" children={() => {
              return <List {...this.props} />
            }} />
            <Route path="/playlist" children={() => {
              return <ReList {...this.props} />
            }} />
            <Route path="/search" children={() => {
              return <Search {...this.props} />
            }} />
            {/* <Redirect from="/" to="/discover" /> */}
            <Route path="/comment" children={() => {
              return <Comment {...this.props} />
            }} />
            <Redirect from="/" to="/discover" />
          </Switch>
          <Audio {...this.props} />
          <Route path='/discover' component={Discover}/>
          <Route path='/personal' component={Personal}/>
          <Route path='/login' component={Login}/>
        </div>
      </Router >
    )
  }
}

export default App
